<template>
	<section class="scholl border-box bg-white" >
		<div class="border-b">
			<scroll-navbar :channels="channels" key-name="text" key-id="id" v-model="selected" ></scroll-navbar>
		</div>		
		<ul class="goods-list " v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
			<li class="pt30rem pb30rem pt30rem border-b20" v-for="(item,index) in goods_list" :key="index">
				<div class="layout layout-juscon fs26rem c999 pl30rem pr30rem pb15rem">
					<span>
						{{ item.create_time * 1000 ,"yyyy-MM-dd hh:mm:ss" | formatDate }}
					</span>
					<span class="red" v-if="item.pay_status == 2">
						已付全款
					</span>	
					<span class="red" v-else-if="item.posit_status == 0">
						未付定金
					</span>	
					<span class="green" v-else>
						已付定金
					</span>						
				</div>
				<div class="pl30rem pr30rem pb30rem pt30rem layout layout-juscon goods-info grey-bg" v-for="i in item.content" @click="jumpDetail(i)">
					<img class="goods-img" :src="img_url+i.goods_picture">
					<div class="flex_1 fs28rem ml20rem mr20rem">
						<strong class="bold ellipsis-more">{{i.goods_name}}</strong>
						<p class="cxo-red-color fs28rem mt10rem mb10rem">定金:￥{{ i.deposit }}</p>
						<div class="layout">
							<p class="bold red fs34rem">￥{{i.goods_money}}</p>
							<!-- <span class="fs24rem c666">预计到货时间:</span> -->
						</div>
					</div>												
					<i class="iconfont icon-right2 fs36rem color999"></i>
				</div>
				<div class="align-right pt30rem pr30rem flex-right" v-if="!item.pay_status">
					<div class="layout">
						<countdown :data="item.booking_endtime - item.current"  v-if='item.booking_endtime'></countdown>
						<span class="fs24rem ml10rem">
							以内付款
						</span>
					</div>
					&emsp;
					<button class="payMoney white fs22rem" v-if="item.pay_status == 2">等待结果</button>
					<button class="payMoney white fs22rem" @click="pay(item)" v-else-if="item.posit_status == 0">付款</button>
					<button class="payMoney white fs22rem" @click="pay(item)" v-else>付尾款</button>
				</div>
			</li>						
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无预购商品'></default>
		</template>

			<!-- 支付方式 -->
		<popup v-model="payment" position="bottom" class="w100">
			<div class="coupon">
				<h2 class="fs34rem c333 bold align-center">支付方式<i class="iconfont icon-guanbi" @click="payment = false"></i></h2>
				<ul>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="alipay">
						<label for="alipay" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-zhifubao" style="color:#1296db"></i>
								<p class="fs30rem ml20rem">支付宝</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="alipay">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
					<li class="pl30rem pr30rem pt30rem pb30rem border-t" @click="wechat">
						<label for="wechat" class="layout w100 h100">
							<div class="layout">
								<i class="iconfont icon-weixin3" style="color:#00b90c"></i>
								<p class="fs30rem ml20rem">微信</p>
							</div>
							<div class="pretty p-icon p-round p-jelly mr20rem fs18">
								<input type="radio" name="radio" id="wechat">
								<div class="state p-primary">
									<i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
									<label></label>
								</div>
							</div>
						</label>
					</li>
				</ul>
			</div>
		</popup>
	</section>
</template>

<script>
	import { myYugou } from "@/api/ordering";
	import { payOrder } from "@/api/shopping-cart";
	import ScrollNavbar from "@/components/Scroll-navbar";
	import Countdown from '@/components/Countdown';
	import Default from "@/components/Default";
	import { formatDate,iosapp } from "@/utils";
	import { InfiniteScroll,Popup } from 'mint-ui';
	import $toast from '@/utils/toast';
	
	export default {
		components: {
			ScrollNavbar,
			Countdown,
			Popup,
			Default
		},
		directives:{
			InfiniteScroll
		},
    	watch:{
    	 	selected(val)
    	 	{
    	 		this.loadInitData();
    	 	}
    	},
		data() {
			return{
				selected     : '9',
				page         : 1,
				pay_mode     : '',
				payment_type : '',
				order_id     : null,
				goods_list   : [],
				loading      : false,
				flag         : true,
				loading      : false,
				sign         : false,
				payment      : false,
				identify_id  : 0,
				img_url      : process.env.IMG_URL,
				img          : require('../../../assets/icon-goods2.png'),
				uid          : localStorage.getItem('uid'),
				showApp      : window.sessionStorage.getItem('isapp'),
				channels 	 : [ 
					{ id: '9' , text: '预售中'},
					{ id: '10', text: '预售成功'}
				],
			}
		},
		methods:{
			loadData()
			{
				// 防止多次加载,loading = true,阻止加载
				this.loading = true;

				var params = {
					uid          : this.uid,
					order_status : this.selected,
					page         : this.page++,
					item         : 10
				}
				myYugou(params).then( res => {
					if(res.data.length > 0 )
					{
						this.goods_list = this.goods_list.concat(res.data);
						this.loading = false;
					}
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}
				})
			},
			loadInitData()
			{
				this.page = 1;
				this.flag = true;
				this.goods_list = [];
    	 		this.loadData();
			},
			pay(item)
			{
				if(item){
					if(item.content[0].posit_status == 0)
					{
						if(item.content[0].pay_cate == 1)
							this.pay_mode = 1;
						else
							this.pay_mode = 0;
					}
					else
						this.pay_mode = 2;
				}

				if( !this.order_id ){
					this.order_id = item.order_id;
				}

				if (window.__wxjs_environment === 'miniprogram')
					this.identify_id = '1'
				
				var params = {
					uid         : this.uid,
					order_id    : this.order_id,
					order_type  : '2',
					pay_mode    : this.pay_mode,
					type        : this.showApp == '1' ? this.payment_type : '0',
					identify_id : this.identify_id,
				}
				if(this.showApp && !this.payment_type)
				{
					this.payment = true;
					
					this.sign = true;
				}
				else if(this.showApp && this.payment_type)
				{
					iosapp('memberPay',params)
				}
				else
				{
					payOrder(params).then( res => {
						if (window.__wxjs_environment === 'miniprogram'){
							var params = '?timestamp='+ res.data.timestamp + '&nonceStr=' + res.data.noncestr
			                   +'&package='+ res.data.package +'&signType=MD5&paySign='+ res.data.sign +'&order_id='+ this.order_id +'&pType=0';

			                  //定义path 与小程序的支付页面的路径相对应
			                var path = '/pages/wxpay/wxpay' + params;

			                  //通过JSSDK的api使小程序跳转到指定的小程序页面
			                wx.miniProgram.navigateTo({url: path});

						}
						else
							window.location.replace(res.data.link + '?order_id=' + res.data.order_id + '&uid=' + this.uid +'&outxx_xxtrade_noxx=' + res.data.outxx_xxtrade_noxx); 
					})
				}
			},
			alipay()
			{
				this.payment_type = 2;
				this.payment = false;
				this.sign && this.pay();
			},
			wechat()
			{
				this.payment_type = 1;
				this.payment = false;
				this.sign && this.pay();
			},
			jumpDetail(item)
			{
				console.log(item)

				if(item.activity_cate == 4)
					this.$router.push('/ordering/detail/group-detail/'+ item.goods_id);
				else
					this.$router.push('/ordering/detail/commodity-detail/'+ item.goods_id);
			}
		},
		filters: {
			formatDate(time,fmt)
			{
				time = Number(time);
    			let date = new Date(time); 
   				return formatDate(date,fmt)
			}
    	}	
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		#scroll-navbar{
			.mint-navbar{
				width: 100%;
			}
		}
		.goods-list{
			.red{
				color: #ff0036;
			}
			.grey-bg{
				background-color: #f5f5f5;
			}
			.goods-img{
				width: 135/28rem;
				height: 135/28rem;
				object-fit: cover;
			}
			.goods-info{				
				.goods-name{
					height: 120/28rem;
					width: 500/28rem;
					line-height: 1.5;
					overflow: hidden;
					.goods-color{
						display: inline-block;
						width: 160/28rem; 
					}
				}
				.buy-station{
					width: 95/28rem;
					height: 37/28rem;
					background-color: #ffe5eb;
				}
			}
			.payMoney{
				padding: 14/28rem 28/28rem;
				background-color: #ff0036;
				border-radius: 5px;
			}
		}
		.coupon{
			h2{
				height: 110/28rem;
				line-height: 110/28rem;
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}	
		}
		.count-down-two{
			font-size: 24/28rem;
		}
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

